<template>
  <el-form ref="jobForm" :model="job" label-width="120px" label-position="right" size="small">
    <h3>{{ $t('basic') }}</h3>
    <basic-setting />

    <h3>{{ $t('reader') }}</h3>
    <el-form-item :label="$t('datasource')">
      <el-select v-model="reader" placeholder="Select">
        <el-option v-for="item in readerOptions" :key="item" :label="item" :value="item"></el-option>
      </el-select>
    </el-form-item>
    <keep-alive>
      <component v-if="reader === 'MySQL'" :is="MysqlReader"></component>
      <component v-else-if="reader === 'Stream'" :is="StreamReader"></component>
      <component v-else-if="reader === 'Oracle'" :is="OracleReader"></component>
      <component v-else-if="reader === 'MongoDB'" :is="MongoDBReader"></component>
      <component v-else-if="reader === 'Txtfile'" :is="TxtfileReader"></component>
    </keep-alive>

    <h3>{{ $t('writer') }}</h3>
    <el-form-item :label="$t('datasource')">
      <el-select v-model="writer" placeholder="Select">
        <el-option v-for="item in writerOptions" :key="item" :label="item" :value="item"></el-option>
      </el-select>
    </el-form-item>
    <keep-alive>
      <component v-if="writer === 'MySQL'" :is="MysqlWriter"></component>
      <component v-else-if="writer === 'Stream'" :is="StreamWriter"></component>
      <component v-else-if="writer === 'Oracle'" :is="OracleWriter"></component>
      <component v-else-if="writer === 'MongoDB'" :is="MongoDBWriter"></component>
      <component v-else-if="writer === 'Txtfile'" :is="TxtfileWriter"></component>
    </keep-alive>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">{{ $t('generate') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import BasicSetting from './BasicSetting.vue'
import MysqlReader from './reader/MysqlReader.vue'
import StreamReader from './reader/StreamReader.vue'
import OracleReader from './reader/OracleReader.vue'
import MongoDBReader from './reader/MongoDBReader.vue'

import TxtfileReader from './reader/TxtfileReader.vue'

import MysqlWriter from './writer/MysqlWriter.vue'
import StreamWriter from './writer/StreamWriter.vue'
import OracleWriter from './writer/OracleWriter.vue'
import MongoDBWriter from './writer/MongoDBWriter.vue'
import TxtfileWriter from './writer/TxtfileWriter.vue'

import { Plus, SemiSelect, RemoveFilled, CirclePlusFilled } from '@element-plus/icons-vue'
import { ref } from "vue";
import { useStore } from 'vuex'

const store = useStore()

const readerOptions = ['Stream', 'MySQL', 'Oracle', 'MongoDB', 'Txtfile']
const writerOptions = ['Stream', 'MySQL', 'Oracle', 'MongoDB', 'Txtfile']

const hello = ref('')

const reader = ref('MySQL')
const writer = ref('Stream')
const jobForm = ref(null)
const job = ref({})

const onSubmit = () => {
  // jobForm.value.validate((valid) => {
  //   if (valid) {
      const url = window.URL.createObjectURL(
        new Blob([JSON.stringify({ job: store.state.job })], {
          type: 'application/json'
        })
      );
      const link = document.createElement("a");
      link.style.display = 'none';
      link.href = url
      link.download = 'job.json'
      document.body.appendChild(link)
      link.click()
  //   } else {
  //     console.log('error submit!!')
  //     return false
  //   }
  // })
}
</script>